<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; padding: 0 25px"
      @row-dblclick="toSongListPage"
      v-loading="loading"
    >
      <el-table-column type="index" />
      <el-table-column label="歌单如下" width="100px">
        <template #default="scope">
          <img :src="scope.row.picUrl" style="width: 75px; border-radius: 10px" />
        </template>
      </el-table-column>

      <el-table-column prop="name" />
      <el-table-column prop="creator" />
      <el-table-column prop="playCount" />
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { search } from "@/service/songs";
import { storage } from "../../stores/storage";
import router from "../../router";
export default defineComponent({
  mounted() {
    this.searchFun();
  },
  setup() {
    let store = storage();
    let tableData = ref([]);
    let loading = ref(true);
    const { searchKeyword, searchType } = storeToRefs(store);
    function searchFun() {
      search(searchKeyword.value, searchType.value)
        .then((res) => {
          if (res.status === 200 && res.data.code === 200) {
            let data = res.data.result.playlists;

            for (let i = 0; i < data.length; i++) {
              tableData.value[i] = {};
              tableData.value[i].id = data[i].id;
              tableData.value[i].name = data[i].name;
              tableData.value[i].picUrl = data[i].coverImgUrl;
              tableData.value[i].playCount = data[i].playCount;
              tableData.value[i].creator = data[i].creator.nickname;
              tableData.value[i].creatorId = data[i].creator.userId;
              tableData.value[i].userType = data[i].creator.userType;
            }
            loading.value = false;
          } else {
            ElMessage("数据获取失败");
          }
        })
        .catch((res) => {
          ElMessage("网络错误");
        });
    }
    function toSongListPage(row) {
      store.setSongListId(row.id);
      router.push({
        path: "/songListContent",
      });
    }

    return {
      searchFun,
      toSongListPage,
      tableData,
      loading,
    };
  },
});
</script>

<style scoped></style>
